<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">
    <title>登录</title>
    <!-- Base Css Files -->
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- Font Icons -->
    <link href="/admin/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/admin/assets/ionicon/css/ionicons.min.css" rel="stylesheet"/>
    <link href="/admin/css/material-design-iconic-font.min.css" rel="stylesheet">
    <!-- animate css -->
    <link href="/admin/css/animate.css" rel="stylesheet"/>
    <!-- Waves-effect -->
    <link href="/admin/css/waves-effect.css" rel="stylesheet">
    <!-- Custom Files -->
    <link href="/admin/css/helper.css" rel="stylesheet" type="text/css"/>
    <link href="/admin/css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/common/sweetalert2/sweetalert2.min.css"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    <script src="/admin/js/modernizr.min.js"></script>
</head>
<body>
<div class="wrapper-page" id="app">
    <div class="panel panel-color panel-primary panel-pages">
        <div class="panel-heading bg-img">
            <div class="bg-overlay"></div>
            <h3 class="text-center m-t-10 text-white"><strong>登录</strong></h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal m-t-20" enctype="multipart/form-data">
                <div class="form-group ">
                    <div class="col-xs-12">
                        <input v-model="user.username" name="username" class="form-control input-lg " type="text"
                               placeholder="用户名">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        <input v-model="user.password" name="password" class="form-control input-lg" type="password"
                               placeholder="密码">
                    </div>
                </div>
                <div class="form-group ">
                    <div class="col-xs-5">
                        <div class="checkbox-success" style="padding-top:15px">
                            <label>
                                第三方登录
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-7">
                        <div class="checkbox checkbox-success">
                           <a href="#" data-tooltip="QQ登录" @click="loginQQ">
                                        <img class="avatar avatar-42"
                                             src="/public/style1/images/uploads/avatar/Connect_logo.png"
                                             alt="">
                                    </a>
                        </div>
                    </div>
                </div>
                <div class="form-group text-center m-t-40">
                    <div class="col-xs-12">
                        <input type="button" value="登录" class="btn btn-success btn-lg w-lg waves-effect waves-light"
                               @click="submitLogin">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/common/js/axios.min.js"></script>
<script src="/common/js/vue2.6.min.js"></script>
<script src="/common/js/request.js"></script>
<script src="/admin/js/jquery.min.js"></script>
<script src="/admin/js/bootstrap.min.js"></script>
<script src="/common/sweetalert2/sweetalert2.min.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            user: {
                username: '',
                password: '',
                remember: false,
            }
        },
        methods: {
           loginQQ(){
            request({
                    url: baseUrl + "/api/login/qq",
                    method: 'post',
                    data: this.user,
                }).then((resp) =>{
                if(resp.code === 200){
                window.location.href = resp.data
                }
                else{
                swal({
                                title: '登录失败',
                                text: "非常抱歉，你未能登录",
                                confirmButtonText: '确认',
                                confirmButtonColor: 'Green',
                            })
                }
                });
           },
            submitLogin() {
                request({
                    url: baseUrl + "/api/login/in",
                    method: 'post',
                    data: this.user,
                }).then((response) => {
                    if(response.code ==200){
                    if(response.data == 1){
                     window.location.href = "/admin"
                    }else{
                      swal({
                                title: '登录成功',
                                text: "恭喜你，你已经登录成功",
                                confirmButtonText: '确认',
                                confirmButtonColor: 'Green',
                            })
                      window.location.href = "/"
                    }
                    }
                    if(response.code ==201){
                     swal({
                                title: '登录失败',
                                text: "用户名或者密码错，请重试",
                                confirmButtonText: '确认',
                                confirmButtonColor: 'Green',
                            })
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    })
</script>
</body>
</html>